<template>
  <div class="back">
    <div class="top">
<!--      <div>大厅已服务监视 {{watchTime.toFixed(1)}} 小时 (h)</div>-->
      <div></div>
      <img src="../../assets/echarts/img.png" alt="">
      <div class="title">项目管理分析</div>
      <img src="../../assets/echarts/img.png" alt="">
      <div class="time">
        <div>{{time}}</div>
        <div>{{date}}</div>
      </div>
      <div @click="toPageBack">返回<img src="" width="30px" alt=""></div>
      <div @click="fullScreen(screenAll)">
        <span v-if="screenAll == 0">进入全屏</span>
        <span v-if="screenAll == 1">退出全屏</span>
      </div>
    </div>
    <el-row>
      <el-col :span="15">
        <div class="item-left-top">
          <div style="position:absolute;left: 0px;"><chart2 :width='380' :height='250' :leftText="chart2Text" :digitalData="digitalData"
                       style="padding-top: 20px;"></chart2></div>
<!--          <div>-->
<!--            <div style="position: absolute; top: 0px; left: -15px">在途项目</div>-->
<!--            <div style="position: absolute; top: 0px; left:40px;color: rgba(211,237,255,255);font-family: digital;font-size: 75px ;left:-30px">{{projectdata.complete}}</div>-->
<!--          </div>-->
<!--          <div>-->
<!--            <div style="position: absolute; top: 52px; left: -66px">已结项目</div>-->
<!--            <div style="position: absolute; top: 155px; color: rgba(211,237,255,255);font-family: digital;font-size: 75px ;left: -94px">{{ projectdata.nocomplete }}</div>-->
<!--          </div>-->
<!--          <div>-->
<!--            <div style="position: absolute; top: 52px; left: -52px">项目总金额</div>-->
<!--            <div style="position: absolute; top: 125px; color: rgba(211,237,255,255);font-family: digital;font-size: 75px ;left: -152px">{{ projectdata.money }}</div>-->
<!--          </div>-->
          <div style="position: absolute;width: 320px;height: 80px;left: 550px">
            <div style="position: absolute; top: -80px; width:150px;height:30px;left: -125px;float:left;color: rgba(211,237,255,255);font-size: 25px">在途项目</div>
            <div style="position: absolute; top: -145px; width:150px;height:30px;float:left;color: rgba(145,199,174,255);font-family: digital;font-size: 70px ;left:125px">{{projectdata.nocomplete}}</div>
          </div>
          <div style="position: absolute;width: 320px;height: 80px;left: 550px">
            <div style="position: absolute; top: 20px; width:150px;height:30px;left: -125px;float:left;color: rgba(211,237,255,255);font-size: 25px">已结项目</div>
            <div style="position: absolute; top: -10px; color: rgba(145,199,174,255);font-family: digital;font-size: 70px ;left: 185px">{{ projectdata.complete }}</div>
          </div>
          <div style="position: absolute;width: 320px;height: 80px;left: 550px">
            <div style="position: absolute; top: 120px; width:170px;height:30px;left: -125px;float:left;color: rgba(211,237,255,255);font-size: 25px">项目总金额(万)</div>
            <div style="position: absolute; top: 60px; color: rgba(145,199,174,255);font-family: digital;font-size: 70px ;left: 50px">{{ projectdata.money }}</div>
          </div>
        </div>
        <div class="item-left-bottom">
          <div>
            <p style="color: rgba(211,237,255,255)">项目分类信息</p>
            <chart3 :width='340' :height='340' :radius='80' :leftText="chart3Text" :digitalData="digitalData2"></chart3>
          </div>
          <div>
            <p style="color: rgba(211,237,255,255)">项目类别分析</p>
            <table border="1" cellpadding="0" cellspacing="0" width="90%" class="table1">
              <tr height="50px" align="center" style="font-size:15px;color: white">
                <td>项目类型</td>
                <td>总金额(万)</td>
                <td>项目数量</td>
              </tr>
              <tr v-for="(item, index) in tableData1" :key="index" height="40px" align="center" style="font-size:13px;color:rgba(145,199,174,255) ">
                <td>{{item.categoryAction}}</td>
                <td>{{item.contractAmount}}</td>
                <td>{{item.categoryCount}}</td>
              </tr>
            </table>
          </div>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="item-right">
          <p style="color: rgba(211,237,255,255)">每月项目金额分析</p>
          <chart1 :width='400' :height='280' :xAxisText="xAxisText1"
                  :xFontColor="'#FFFFFF'" :digitalData="digitalData1"></chart1>
          <p style="color: rgba(211,237,255,255)">项目重要性分析</p>
<div style="width: 490px; height: 370px;">
          <div id="task" style="width: 480px; height: 330px; position: absolute;left: -10px;top: 0px"></div>
</div>


        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import moment from 'moment'
import chart1 from '@/components/echarts/chart1'
import chart2 from '@/components/echarts/chart2'
import chart3 from '@/components/echarts/chart3'
import {
  getProjectNums,
  getProjectAreaInfos,
  getProjectAmountByMonth,
  getProjectCategoryByCategory,
  getProjectAmountBy, getProjectsortBy, getsortByProject, getsortByCategory,getsortByPriority
} from '@/api/project'
import axios from "axios";

export default {
  components: {
    chart1,
    chart2,
    chart3
  },
  data () {
    return {
      projectdata:{
        complete:100,
        nocomplete:56,
        money:120
      },

      screenAll: 0, // 0退出全屏, 1全屏
      time: '',
      watchTime: 0,
      digitalData1: [],
      xAxisText1: [],
      chart2Text: [],
      digitalData: [],
      chart3Text: ['广州市', '佛山市', '深圳市', '上海市', '北京市'],
      digitalData2: [
        {value: 200, name: '广州市'},
        {value: 100, name: '佛山市'},
        {value: 100, name: '深圳市'},
        {value: 50, name: '上海市'},
        {value: 50, name: '北京市'}
      ],
      tableData1: [],
      tableData2: [],
      sortPriority: []
    }
  },

  created() {
    this.getProjectData()
    this.getProjectAreaInfo()
    this.getProjectAmountByMonth()
    this.getProjectCategoryInfo()
    this.getsortbycategory()
    this.sortbypriority()

  },
  mounted () {

    this.timer = setInterval(() => { // 更新小时时间
      this.time = moment().format('HH:mm:ss')
    }, 1000)
    this.watchTimer = setInterval(() => { // 更新监测时间
      this.watchTime += 0.1
    }, 360000)
  },
  beforeDestroy () { // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
    if (this.watchTimer) {
      clearInterval(this.watchTimer)
    }
  },

  methods: {

    /**
     * 获取项目分类信息
     */
    getProjectCategoryInfo(){
      getProjectCategoryByCategory().then((res)=>{
        this.digitalData2 = res.data
        res.data.forEach(item =>{
          this.chart3Text.push(item.name)
        })
      })
    },

    /**
     * 获取项目金额数据
     */
    getProjectAmountByMonth(){
      getProjectAmountByMonth().then((res)=>{
        this.digitalData1 = res.data.value
        this.xAxisText1 = res.data.key
      })
    },

    /**
     * 获取项目区域数据
     */
    getProjectAreaInfo(){
      getProjectAreaInfos().then((res)=>{
        this.digitalData = res.data
        res.data.forEach(item =>{
          this.chart2Text.push(item.name)
        })
      })
    },
    getProjectData(){
      getProjectNums().then((res)=>{
        this.projectdata = res.data
      })
    },


    getsortbycategory(){
      getsortByCategory().then((res)=>{
        this.tableData1=res.data
      })
    },

    sortbypriority(){
      getsortByPriority().then((res)=>{

        res.data.forEach((e) => {
          this.sortPriority.push({
            value : e.priCount,
            name : e.priOrity,
          })
        })
        this.drawChart1();
      })

    },

    toPageBack () {
      this.$router.go(-1)
    },
    fullScreen () { // # 全屏显示
      if (this.screenAll === 1) {
        this.screenAll = 0
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        this.screenAll = 1
        if (document.documentElement.requestFullscreen) {
          document.documentElement.requestFullscreen()
        } else if (document.documentElement.webkitRequestFullScreen) {
          document.documentElement.webkitRequestFullScreen()
        } else if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen()
        } else if (document.documentElement.msRequestFullscreen) {
          // IE11
          document.documentElement.msRequestFullscreen()
        }
      }
    },
    drawChart1() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let task = this.$echarts.init(document.getElementById("task"));


      // 指定图表的配置项和数据
      let tasks = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%'
        },
        legend: {
          textStyle: {
            color: "rgba(237, 225, 225, 1)"
          }
        },
        series: [
          {
            name: 'Funnel',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data:this.sortPriority
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      task.setOption(tasks);
    }



  },
  computed: {
    date () {
      return moment().format('YYYY 年 MM 月 DD 日')
    }
  }
}
</script>

<style lang="scss" scoped>
tr:hover{
  background: #030237;
}
.back{
  background: #030237;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 18px;
  overflow-x: hidden;
  color: #5A95DA;
  .top{
    width: 100%;
    height: 60px;
    line-height: 60px;
    color: #4471A6;
    // background: #050297;
    border-bottom: 2px solid #4471A6;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1400px;
    position: relative;
    div:first-child{
      position: relative;
      left: -3%;
    }
    img:nth-child(2){
      width: 250px;
      height: 40px;
      margin-left: 2%;
    }
    img:nth-child(4){
      width: 250px;
      height: 40px;
    }
    .title{
      width: 280px;

      background-size: 100% 100%;
      background-repeat: no-repeat;
      text-align: center;
    }
    .time{
      width: 200px;
      height: 50px;
      line-height: 25px;
      display: flex;
      flex-direction: column;
      div{
        text-align: center;
        font-weight: 600;
        font-size: 18px;
        font-family: Digital;
      }
    }
    div:nth-child(6){
      cursor: pointer;
      img{
        position: relative;
        top: 5px;
        margin-left: 5px;
      }
    }
    div:last-child{
      font-size: 12px;
      margin-left: 2%;
      cursor: pointer;
    }
    div:last-child:hover{
      color: cyan;
    }
  }
  .el-row{
    .item-left-top{
      width: 100%;
      height: 350px;
      display: flex;
      justify-content: center;
      align-items: center;
      // background: crimson;
      div{
        width: 26%;
        height: 280px;
        margin: auto;
        display: flex;
        flex-direction: column;
        position: relative;
        left: 1%;
      }
      div:first-child{
        width: 400px;
        height: 280px;
      }
      div:nth-child(2), div:last-child{
        animation: dh1 5s;
        -webkit-animation: dh1 5s; /* Safari and Chrome */
        div:nth-child(2){
          font-size: 80px;
          padding: 30px 0;
          color: #D3EDFF;
        }
        div:nth-child(3), div:last-child{
          text-align: left;
          text-indent: 30px;
        }
      }
    }
    .item-left-bottom{
      width: 96%;
      height: 400px;
      margin: auto;
      border: 2px solid #0094FF;
      border-radius: 10px;
      margin-bottom: 30px;
      background-image: radial-gradient(#1A2D5E 5%, #000337 70%);
      display: flex;
      justify-content: center;
      align-items: center;
      animation: dh2 2s;
      -webkit-animation: dh2 2s; /* Safari and Chrome */
      animation-delay: 2s;
      animation-fill-mode: both;
      div{
        height: 380px;
        margin: 0 10px;
        p{
          position: relative;
          top: 30px;
        }
      }
      div:first-child{
        width: 340px;
        display: flex;
        flex-direction: column;
        align-items: center;
        div{
          position: relative;
          bottom: 8%;
          animation: dh4 2s;
          -webkit-animation: dh4 2s; /* Safari and Chrome */
          animation-delay: 3s;
          animation-fill-mode: both;
        }
      }
      div:last-child{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .table1{
        position: relative;
        top: 50px;
        border: 1px solid #5A95DA;
        font-size: 12px;
        animation: dh4 2s;
        -webkit-animation: dh4 2s; /* Safari and Chrome */
        animation-delay: 5s;
        animation-fill-mode: both;
      }
    }
    .item-right{
      width: 90%;
      height: 700px;
      margin: 40px auto;
      border: 2px solid #0094FF;
      border-radius: 10px;
      background-image: linear-gradient(to top, #1A2D5E, #000337);
      animation: dh3 2s;
      -webkit-animation: dh3 2s; /* Safari and Chrome */
      animation-delay: 4s;
      animation-fill-mode: both;
      div{
        position: relative;
        left: 5%;
        animation: dh4 2s;
        -webkit-animation: dh4 2s; /* Safari and Chrome */
        animation-delay: 6s;
        animation-fill-mode: both;
      }
      .table2{
        border: 1px solid #5A95DA;
        font-size: 12px;
        margin: 30px auto;
        animation: dh4 2s;
        -webkit-animation: dh4 2s; /* Safari and Chrome */
        animation-delay: 7s;
        animation-fill-mode: both;
      }
      p{
        padding-top: 40px;
        font-size: 15px;
        text-align: center;
      }
      p:first-child{
        padding-top: 20px;
        margin: 0;
      }
    }
  }
}
// 渐变效果
@keyframes dh1{
  from {opacity: 0;}
  to {opacity: 1;}
}

// 上移效果
@keyframes dh2{
  from {opacity: 0; position: relative;top: 100px;}
  to {opacity: 1; position: relative; top: 0;}
}

// 左移效果
@keyframes dh3{
  from {opacity: 0; position: relative;left: 500px;}
  to {opacity: 1; position: relative; left: 0;}
}

// 缩放出现效果
@keyframes dh4{
  from {opacity: 0; transform: scale(0,0);}
  to {opacity: 1; transform: scale(1,1);}
}
</style>
